import { getRecommendList } from '@/src/api/Goods';
import React, { useEffect, useState } from 'react';
import { Image, ImageBackground, StyleSheet, Text, View } from 'react-native';

interface RecommendProps {
  price: number;
  picture: string;
}
export default function Recommend() {
  const [list, setList] = useState<RecommendProps[]>([]);
  const loadGetRecommendList = async () => {
    const result = await getRecommendList();
    console.log('getRecommendList----->', result);
    setList(result.data.rows);
  };
  useEffect(() => {
    loadGetRecommendList();
  }, []);
  return (
    <View style={styles.container}>
      <ImageBackground
        source={require('@/assets/img/home_cmd_sm.png')}
        style={styles.tetuituijian_box}
        resizeMode="cover"
      >
        {/* 标题 */}
        <View style={styles.tetuituijian}>
          <Image
            style={styles.tetuituijian_title}
            source={require('@/assets/img/home_cmd_title.png')}
          ></Image>
        </View>
        {/* 内容 */}
        <View style={styles.tetuituijian_content}>
          {/* 左边图片 */}
          <View style={styles.tetuituijian_img_left}>
            <Image
              style={styles.tetuituijian_img}
              source={require('@/assets/img/home_cmd_inner.png')}
            ></Image>
          </View>
          {/* 右边商品 */}

          <View style={styles.tetuituijian_goods}>
            {list.slice(0, 3).map((item) => {
              return (
                <View style={styles.tetuituijian_goods_li}>
                  <Image
                    style={styles.tetuituijian_img_right}
                    source={{ uri: item.picture }}
                  ></Image>
                  <Text style={styles.tetuituijian_img_right_title}>
                    ￥{item.price}
                  </Text>
                </View>
              );
            })}
            {/* <View style={styles.tetuituijian_goods_li}>
              <Image
                style={styles.tetuituijian_img_right}
                source={require('@/assets/img/26.jpg')}
              ></Image>
              <Text style={styles.tetuituijian_img_right_title}>￥117</Text>
            </View>
            <View style={styles.tetuituijian_goods_li}>
              <Image
                style={styles.tetuituijian_img_right}
                source={require('@/assets/img/26.jpg')}
              ></Image>
              <Text style={styles.tetuituijian_img_right_title}>￥119</Text>
            </View> */}
          </View>
        </View>
      </ImageBackground>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    margin: 5,
  },
  tetuituijian_box: {
    width: '100%',
    height: 180,
    borderRadius: 10,
    overflow: 'hidden',
  },
  tetuituijian: {
    padding: 10,
  },
  tetuituijian_title: {
    width: 255,
    height: 30,
  },
  tetuituijian_img: {
    width: 90,
    height: 120,
  },
  tetuituijian_img_left: {
    padding: 6,
  },
  tetuituijian_content: {
    display: 'flex',
    flexDirection: 'row',
  },
  tetuituijian_goods: {
    // backgroundColor: '#f0f',
    display: 'flex',
    alignItems: 'center',
    flexDirection: 'row',
    padding: 8,
    textAlign: 'center',
    flex: 1,
    width: 240,
  },
  tetuituijian_goods_li: {
    marginRight: 6,
    width: '33%',
  },
  tetuituijian_img_right: {
    // width: 73,
    width: '100%',
    height: 73,
  },
  tetuituijian_img_right_title: {
    fontSize: 16,
    borderRadius: 6,
    fontWeight: 'bold',
    width: 73,
    margin: 'auto',
    textAlign: 'center',
    backgroundColor: '#fe5969',
    color: '#FFF',
    marginTop: 6,
  },
});
